<template>
	<div style="height: 100%; width: 100%;display: flex;flex-direction: column;">

		<div style="width: 100%;height: 10%; display: flex;flex-direction: row;align-items: center;">
			<el-input style="width: 800px; margin-left: 2%" size="small" placeholder="请输入账号或用户名"
					  v-model="searchData"></el-input>
			<el-button style="margin-left: 2%;" size="small" type="primary" @click="getUserList()">查询</el-button>
			<el-button style="margin-right: 2%;" size="small" type="success" @click="resetTerm()">重置</el-button>
			<el-button style="margin-left: 10%" size="small" type="success" @click="addUser()">添加用户</el-button>

		</div>

		<div class="table_main">
			<ElTable
					:data="userData"
					:header-cell-style="{color: '#ffffff',background: '#6f7f93'}"
					class="table_border"
					:highlight-current-row="false">


				<ElTableColumn prop="account" label="账号" width="150" align="center"
							   show-overflow-tooltip/>

				<ElTableColumn prop="username" label="用户名" width="150" align="center"
							   show-overflow-tooltip/>

				<ElTableColumn prop="roleName" label="用户类型" align="center" width="150"
							   show-overflow-tooltip/>

				<ElTableColumn prop="compName" label="单位" width="150" align="center" show-overflow-tooltip/>

				<ElTableColumn prop="priorityResult" label="审核状态" width="150" align="center"
							   show-overflow-tooltip>
				</ElTableColumn>

				<ElTableColumn prop="updateTime" label="最近更新时间" width="200" align="center"
							   show-overflow-tooltip/>

				<ElTableColumn label="操作" align="center" show-overflow-tooltip>
					<template #default="scope">
						<ElButton
								type="success" size="small"
								@click="handleView(scope.$index, scope.row)">查看
						</ElButton>
						<ElButton
								type="warning" size="small"
								@click="handleEdit()">编辑
						</ElButton>
						<ElButton
								type="danger" size="small"
								@click="handleDelete(scope.row.droneDeviceId)">删除
						</ElButton>
					</template>
				</ElTableColumn>
			</ElTable>
		</div>

		<!--编辑用户对话框-->
		<el-dialog
				:title="编辑"
				:visible.sync="dialogVisible"
				width="30%">
			<el-form ref="form" :model="userInfoEdit">
<!--				<el-form-item label="公司名称:" v-model="userInfoEdit.compId">-->
<!--					<el-option v-for="item in compInfos" :key="item.compId" :label="item.compName"-->
<!--							   :value="item.compId">-->
<!--					</el-option>-->
<!--				</el-form-item>-->
<!--				<el-select size="large" v-model="userInfoEdit.roleId" placeholder="请选择用户类型"-->
<!--						   style="margin: 10px 0; width: 400px">-->
<!--					<el-option v-for="item in roleInfos" :key="item.roleId" :label="item.roleName"-->
<!--							   :value="item.roleId">-->
<!--					</el-option>-->
<!--				</el-select>-->
<!--				<el-form-item label="用户名:" prop="username">-->
<!--					<el-input v-model="userInfoEdit.username" prefix-icon="el-icon-info"></el-input>-->
<!--				</el-form-item>-->
<!--				<el-form-item label="账号:" prop="account">-->
<!--					<el-input v-model="userInfoEdit.account" prefix-icon="el-icon-info"></el-input>-->
<!--				</el-form-item>-->
<!--				<el-form-item label="密码:" prop="password">-->
<!--					<el-input v-model="userInfoEdit.password" prefix-icon="el-icon-info"></el-input>-->
<!--				</el-form-item>-->
<!--				<el-form-item label="联系电话:" prop="phone">-->
<!--					<el-input v-model="userInfoEdit.phone" prefix-icon="el-icon-info"></el-input>-->
<!--				</el-form-item>-->
			</el-form>
			<span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit">确 定</el-button>
            </span>
		</el-dialog>



		<ElPagination
				background
				layout="prev, pager, next,jumper, ->, total"
				:currentPage="queryTerms.currentPage"
				:page-size="queryTerms.pageSize"
				:total="queryTerms.total"
				@current-change="handleCurrentChange"
				style="text-align: center;"
		/>

	</div>
</template>

<script>
	import webSetInfo from "../server/webSetInfo";

	export default {

		data() {
			return {
				userData: [],
				userInfo: {},
				requestType: 1,
				searchData: '',
				queryTerms: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
				},
				dialogVisible: false,
				title: '新增用户',
				roleInfos: [],
				compInfos: [],
				userInfoEdit: {
					compId: '',
					password: '',
					username: '',
					userPhone: '',
					account: '',
					roleId: '',
				}
			}
		},
		mounted() {
			this.userInfo = this.$store.state.userAllInfos;
			this.compInfos = this.$store.state.companyInfos;
			this.roleInfos = this.$store.state.roleInfos;
			if (this.userInfo == null) {
				this.$router.push({
					path: '/login'
				})
			} else {
				this.getUserList();
			}
		},
		methods: {

			getUserList() {
				this.$axios_token({
					url: `${webSetInfo.apiUrl}` + `/user/getUserInfo`,
					method: "post",
					data: {
						pageSize: this.queryTerms.pageSize,
						pageNo: this.queryTerms.currentPage,
						searchData: this.searchData
					}
				})
						.then(response => {
							console.log("user___" + response.data.records.length)
							let data = response.data;
							if (response.code == 200) {
								if (data.total === 0) {
									this.$message.error("暂无更多数据")
								} else {
									this.loadData(data)
								}
							}
						})
			},

			loadData(e) {
				this.userData = e.records
				this.queryTerms.currentPage = parseInt(e.current);
				this.queryTerms.pageSize = parseInt(e.size);
				this.queryTerms.total = parseInt(e.total);
			},
			resetTerm() {
				this.searchData = '';
			},
			handleCurrentChange(e) {
				this.queryTerms.currentPage = e;
				this.getUserList();
			},

			handleEdit(row){
				this.dialogVisible = true;
				this.hasId = row.roleId;
				//重置表单数据
			},


			addUser() {
				this.dialogVisible = true;

			},


			handleClose() {
			},

			handleDelete(id) {
			},

			handleView() {

			},
		}
	}
</script>

<style>
</style>
